<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-input placeholder="请输入内容" v-model="page.query" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="getuser(1)"></el-button>
      </el-input>
      <el-button class="add" type="primary" plain @click="drawer = true">添加</el-button>
      <el-table :data="userlist" stripe style="width: 100%">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="id" label="id" width="80">
        </el-table-column>
        <el-table-column prop="role_name" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="电话 " width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column label="日期">
          <template slot-scope="scope">
            <span>{{ (scope.row.create_time * 1000) | newdate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pagesize" layout="total, sizes, prev, pager, next, jumper" :current-page="page.pagenum"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加窗口 -->
    <el-drawer title="添加用户" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <el-form :rules="rules" ref="userref" :model="userform" label-width="80px">
        <el-form-item label="用户民" prop="username">
          <el-input v-model="userform.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userform.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userform.email"></el-input>
        </el-form-item>
        <el-button type="primary" plain @click="adduserfun">确定</el-button>
      </el-form>
    </el-drawer>

    <!-- 修改窗口 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-form :rules="rules" ref="userref" :model="userform" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input disabled v-model="userform.username"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userform.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userform.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edituserfun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 引入接口
import axios from 'axios';
import { EditUser, GetUser } from '@/api/user';
import { AddUser } from '@/api/user';
import { GetOenUser } from '@/api/user'
import { DelOneUser } from '@/api/user';
export default {
  data() {
    return {
      userlist: [],
      page: {
        pagenum: 1,
        pagesize: 10,
        query: ''
      },
      title: '',
      // 添加区域
      drawer: false,
      direction: 'rtl',
      userform: {},

      // 修改开关
      dialogVisible: false,

      // 总条数
      total: 0,

      //前置验证
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'change' },

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]

      }
    }
  },
  // 监听dialogVisible和drawer弹窗 
  // 当他们被打开时清空输入框
  watch: {
    drawer() {
      this.userform = {}
    },
    dialogVisible() {
      this.userform = {}
    }
  },
  methods: {
    //添加区域
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },

    // 确认添加
    adduserfun() {
      this.$refs['userref'].validate(async v => {
        if (v) {
          //发起请求
          let { data, meta } = await AddUser(this.userform)
          if (meta.status != 201) return this.$message.error(meta.msg)
          this.$message.success(meta.msg)
          // 1.关闭窗口
          this.drawer = false
          // 2.更新页面
          this.getuser()
          // 3.清空数据
          this.userform = {}
        }
      })
    },

    // 分页器功能
    handleSizeChange(val) {
      this.page.pagesize = val
      this.page.pagenum = 1
      this.getuser()
    },
    handleCurrentChange(val) {
      this.page.pagenum = val
      this.getuser()
    },

    // 修改
    async handleEdit(index, { id }) {
      console.log(index, id);
      this.dialogVisible = true
      // 发起请求获取单条记录
      let { data, meta } = await GetOenUser(id)
      if (meta.status != 200) return this.$message.error(meta.msg)
      this.userform = data
    },
    // 确定修改
    async edituserfun() {
      console.log(this.userform);
      let { data, meta } = await EditUser(this.userform)
      if (meta.status != 200) return this.$message.error(meta.msg)
      this.$message.success(meta.msg)
      // 1.关闭窗口
      this.dialogVisible = false
      // 2.更新页面
      this.getuser()
      // 3.清空数据
      this.userform = {}
    },


    // 删除 
    handleDelete(index, { id }) {
      console.log(index, id);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let { data, meta } = await DelOneUser(id)
        if (meta.status != 200) return this.$message.error(meta.msg)
        this.$message.success(meta.msg)
        this.getuser()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 获取数据
    async getuser(e) {
      if (e == 1) {
        this.page.pagenum = 1
      }
      // let data = await GetUser({pagenum:1,pagesize:10})
      // console.log(data.data.users)
      // this.tableData = data.data.users 
      // console.log(this.tableData)
      let { data, meta } = await GetUser(this.page)
      console.log(data)
      this.userlist = data.users
      if (meta.status != 200) return this.$message.error(meta.msg)
      // 渲染总条数
      this.total = data.total
    }
  },

  mounted() {
    this.getuser()

    this.title = localStorage.getItem('title')
  }
}
</script>
<style scoped>
.add {
  margin-bottom: 20px;
}

.input-with-select {
  width: 30%;
}
</style>